// 创建XMLHttpRequest对象
const xhr = new XMLHttpRequest();

// 设置请求的URL，这里假设JSON Server运行在本地3000端口，且学生数据接口为 /students
const url = 'http://localhost:3000/students';

// 打开请求，使用GET方法
xhr.open('GET', url, true);

// 设置响应类型为JSON
xhr.responseType = 'json';

// 定义请求成功的回调函数
xhr.onload = function () {
  if (xhr.status === 200) {
    const students = xhr.response;
    const tableBody = document.getElementById('student-table').getElementsByTagName('tbody')[0];
    // 遍历学生数据数组，为每个学生创建一行数据添加到表格中
    students.forEach(student => {
      const row = document.createElement('tr');
      const nameCell = document.createElement('td');
      nameCell.textContent = student.name;
      const ageCell = document.createElement('td');
      ageCell.textContent = student.age;
      const majorCell = document.createElement('td');
      majorCell.textContent = student.major;
      const gradeCell = document.createElement('td');
      gradeCell.textContent = student.grade;

      row.appendChild(nameCell);
      row.appendChild(ageCell);
      row.appendChild(majorCell);
      row.appendChild(gradeCell);

      tableBody.appendChild(row);
    });
  } else {
    console.error('请求失败，状态码：', xhr.status);
  }
};

// 定义请求失败的回调函数
xhr.onerror = function () {
  console.error('请求发生错误');
};

// 发送请求
xhr.send();